<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-14 15:08:24
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 17:12:22
-->
<template>
  <!--1. 容器 -->
  <div ref="bottom1_container" style="height: 95%"></div>
</template>

<script>

//2、引入折线图构造函数
import { Gauge } from '@antv/g2plot';
export default {
  data() {
    return{
      dataArr:[],
      percent:0
      

    }
  },
  created(){

  },

  mounted(){
    this.initChart()
  },

  methods:{
    initChart(){
      const ticks = [0, 1 / 3, 2 / 3, 1];
      const color = ['#F4664A', '#FAAD14', '#30BF78'];
      const gauge = new Gauge(this.$refs.bottom1_container, {
        percent: this.percent,
  range: {
    ticks: [0, 1],
    color: ['l(0) 0:#F4664A 0.5:#FAAD14 1:#30BF78'],
  },
  indicator: {
    
  },
  statistic: {
   
  },
     
});
    //4、渲染折线图
      gauge.render()
      setInterval(()=>{
        if(this.percent<0.5){
          this.percent+=0.01
          gauge.changeData(this.percent);
        }else{
          this.percent=0.5
        }
      },50)
    }
  }

}
</script>